<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-08 22:35:25
-->
<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <!-- 第一行 -->
      <div class="header_top">
        <!-- 容器居中显示 -->
        <div class="wrapper">
          <div class="left"></div>
          <div class="right">
            <a href="http://www.sxau.edu.cn/"
              ><span style="color: #fff">学校主页</span></a
            >
          </div>
        </div>
      </div>

      <!-- / 第一行 -->
      <!-- 第二行 -->
      <div class="header_main">
        <div class="wrapper">
          <div class="logo" @click="toHomeHandler">
            <img src="/resources/images/logo.png" alt="" />
          </div>
        </div>
      </div>
      <!-- /第二行 -->
      <!-- /容器居中显示 -->
      <div class="nav">
        <ul class="menu">
          <li class="menu_item">
            <a href="">首页</a>
          </li>
          <li class="menu_item" v-for="a in categories" :key="a.id">
            <a @click="toListHandler(a)">{{ a.name }}</a>
            <ul class="sub_menu">
              <li v-for="b in a.children" :key="b.id">
                <a @click="toListHandler(b)">{{ b.name }}</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    <!-- 体部 -->
    <div class="all_content">
      <div class="content">
        <div class="carousel">
          <el-carousel height="350px">
            <el-carousel-item v-for="item in carousels" :key="item.id">
              <img :src="item.url" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!--/轮播图 -->

      <!-- 新闻 -->
      <div>
        <center><h1>新闻动态</h1></center>
      </div>
      <div class="wrapper">
        <div class="one">
          <div>
            <a href="http://soft.sxau.edu.cn/info/1046/2834.htm"
              >软件学院举办庆祝建党百年党史学习教育暨课程思政成果展</a
            >
            <p>
              <a href="http://soft.sxau.edu.cn/info/1046/2827.htm"
                >软件学院举办庆祝建党百年党史学习教育暨课程思政成果展</a
              >
            </p>
          </div>
        </div>
        <div class="three">
          <p>
            <a href="http://soft.sxau.edu.cn/info/1046/2929.html"
              >软件学院开展2021年暑假前安全检查工作</a
            >
          </p>
          <p>
            <a href="http://soft.sxau.edu.cn/info/1046/2921.html"
              >山西农业大学与太原市致远实验中学校举行优质生源基地签约授牌仪式</a
            >
          </p>
          <p>
            <a href="http://soft.sxau.edu.cn/info/1046/2890.htm"
              >软件学院举办校警地三方共庆建党一百周年合唱汇演</a
            >
          </p>
          <p>
            <a href="http://soft.sxau.edu.cn/info/1046/2891.html"
              >软件学院举办青年教师教学基本功竞赛</a
            >
          </p>
          <p>
            <a href="http://soft.sxau.edu.cn/info/1046/2919.html"
              >软件学院举办党史学习教育专题学习报告会</a
            >
          </p>
        </div>
      </div>
    </div>
    <Homedown></Homedown>
    <Footer></Footer>
  </div>
  <!-- 底部 -->
</template>

<script>
import { get } from "../utils/request";
// import Header from './components/Header'
import Footer from "./components/Footer";
import Homedown from "../views/Homedown";
export default {
  // 4. 局部组件注册
  components: {
    // Header,
    Footer,
    Homedown,
  },
  // 1. 数据
  data() {
    return {
      categories: [],
      carousels: [],
    };
  },
  // 2. 生命周期钩子函数 - 在vue的生命周期各个阶段会执行的代码
  created() {
    this.loadCategories();
    this.loadCarousels();
  },
  // 3. 方法，一般用来定义方法或者事件处理函数
  methods: {
    toListHandler(cItem) {
      // this.$router.go(0)
      // this.$router.query = cItem
      this.$router.push({
        path: "/list",
        query: cItem,
      });
      // this.$router.go(0);
    },
    toHomeHandler() {
      this.$router.push({ path: "/home" });
    },
    // 加载栏目信息
    loadCategories() {
      let url = "/index/category/findCategoryTree";
      get(url).then((resp) => {
        this.categories = resp.data;
      });
    },
    // 加载轮播图数据
    loadCarousels() {
      let url = "/index/carousel/findAll";
      get(url).then((resp) => {
        this.carousels = resp.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  .header {
    text-align: center;
    background: url(/resources/images/navbg.png);
    widows: 100%;
    height: 195px;
    .header_top {
      & > .wrapper::after {
        display: block;
        content: "";
        clear: both;
      }

      .left,
      .right {
        line-height: 3em;
      }
      .left {
        float: left;
      }
      .right {
        float: right;
        margin-right: 80px;
      }
    }
    .header_main {
      padding: 0.5em 0;
      & > .wrapper {
        display: flex;
        justify-content: space-between;
        position: relative;
      }
      .logo {
        margin-left: 200px;
        cursor: pointer;
        img {
          width: 100%;
          height: 70px;
          vertical-align: middle;
        }
      }
    }
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    text-decoration: none;
    color: #666;
  }
  .nav {
    margin-top: 25px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    height: 70px;
    background-color: null;
  }
  .nav a {
    color: #fff;
    font-style: 微软雅黑;
  }
  .nav ul.menu::after {
    display: block;
    content: "";
    clear: both;
  }
  .nav ul.menu > li.menu_item {
    font-size: 18px;
    float: left;
    position: relative;
    width: 110px;
    height: 45px;
    text-align: center;
    cursor: pointer;
  }
  .nav ul.menu > li.menu_item:hover ul.sub_menu {
    display: block;
  }
  .nav ul.menu ul.sub_menu {
    font-size: 15px;
    display: none;
    position: absolute;
    background-color: #395585;
    margin-top: 20px;
    margin-left: 5px;
    width: 100px;
  }
  .nav ul.menu ul.sub_menu a {
    color: #fff;
    box-sizing: border-box;
  }
  .nav ul.menu ul.sub_menu > li:hover {
    background-color: null;
  }
  .nav ul.menu ul.sub_menu > li {
    margin-top: 5px;
    height: 35px;
  }
  .all_content {
    padding-bottom: 50px;
    .content {
      .carousel {
       text-align: center;
       background-color: rgb(201, 201, 201);
        img {
          // width: 100%;
          height: 100%;
          margin: 0 auto;
        }
      }
    }
    .wrapper {
      height: 300px;
      .one,
      .three {
        line-height: 3em;
      }
      .one {
        float: left;
        padding: 1em 0;
      }
      .three {
        float: right;
      }
    }
  }
}
</style>